// 获取地区销量趋势
async function getSalesData() {
    let res = await axios({ url: 'http://8.138.119.204:8182/api/trend?type=map' })
    return res.data
}

async function renderSales() {
    let resdata = await getSalesData()

    const box = document.querySelector('.areachart')

    const myecharts = echarts.init(box, 'dark')

    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {

            //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            data: resdata.data.series.map(item => item.name)
        },
        toolbox: {
            //   feature: {
            //     saveAsImage: {}
            //   }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                data: resdata.data.xAxis
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: resdata.data.series.map(item => {
            return {
                name: item.name,
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: item.data
            }
        }),
        color: ['#5E7C84', '#A75B5B', '#AD7E72', '#6F978A', '#B0684E']
        // [
        //   {
        //     name: 'Email',
        //     type: 'line',
        //     stack: 'Total',
        //     areaStyle: {},
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [120, 132, 101, 134, 90, 230, 210]
        //   }        
        // ]
    };

    myecharts.setOption(option)
}

renderSales()


// 柱子 - 销售金额
async function getSalesMoneyData() {
    let res = await axios({ url: 'http://8.138.119.204:8182/api/rank' })
    return res.data
}

async function renderSalesMoneyData() {
    let resdata = await getSalesMoneyData()

    const box = document.querySelector('.bt1')

    const myecharts = echarts.init(box, 'dark')

    let index = 7
  
    const datalist = resdata.data.slice(0,index).map(item=>item.value) //[120, 200, 150, 80, 70, 110, 130]
    const xtitles = resdata.data.slice(0,index).map(item=>item.name)
    const  option = {
        tooltip:{

        },
        grid:{
            top:'10%',
            bottom:'10%'
        },
        xAxis: {
            type: 'category',
            data:xtitles //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            data:datalist.map((item,index)=>{
                return  {
                    value:item,
                    itemStyle:{
                        color:index<datalist.length-2?'#0094ff':'#ff0000'
                    }
                }
            })
        }],
     
    };
    
    setInterval(function (){
        // var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
    
        // // var data0 = option.series[0].data;
        // var data0 = datalist;
        
        
        // // data0.pop();
        // data0.push(Math.round(Math.random() * 1000));
        index++
        if(index>=resdata.data.length){
            index = 0
        }

        const itemdata = resdata.data[index]
        datalist.shift();
        xtitles.shift();

        datalist.push(itemdata.value)
        xtitles.push(itemdata.name)
    
        // option.xAxis.data.shift();
        // option.xAxis.data.push(axisData);
        option.xAxis.data = xtitles
        option.series[0]={
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            data:datalist.map((item,index)=>{
                return  {
                    value:item,
                    itemStyle:{
                        color:index<datalist.length-2?'#0094ff':'#ff0000'
                    }
                }
            })
        }
    
        myecharts.setOption(option);
    }, 2100);


    myecharts.setOption(option)
}

renderSalesMoneyData()


// 仪表盘
async function renderybp() {
    
    const box = document.querySelector('.ybp')

    const myecharts = echarts.init(box, 'dark')

    const option = {
        series: [
          {
            radius:'50%',
            center:['18%','30%'],
            title:{
             offsetCenter: ["0", "-46%"]
            },
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.2, '#91CA8C'],
                  [0.8, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'red'
              }
            },
            axisTick: {
              distance: -2,
              length: 5,
              lineStyle: {
                color: '#759AA0',
                width: 2
              }
            },
            splitLine: {
              distance: -2,
              length: 10,
              lineStyle: {
                color: '#759AA0',
                width: 4
              }
            },
          
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10,
              
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize:15,
              color: 'inherit'
            },
            data: [
              {
                name:'ivan',
                value: 70
              }
            ]
          },
          {
            radius:'50%',
            center:['50%','30%'],
            title:{
             offsetCenter: ["0", "-46%"]
            },
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.2, '#91CA8C'],
                  [0.8, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'red'
              }
            },
            axisTick: {
              distance: -2,
              length: 5,
              lineStyle: {
                color: '#759AA0',
                width: 2
              }
            },
            splitLine: {
              distance: -2,
              length: 10,
              lineStyle: {
                color: '#759AA0',
                width: 4
              }
            },
          
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10,
              
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize:15,
              color: 'inherit'
            },
            data: [
              {
                name:'ivan',
                value: 70
              }
            ]
          },
          {
            radius:'50%',
            center:['82%','30%'],
            title:{
             offsetCenter: ["0", "-46%"]
            },
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.2, '#91CA8C'],
                  [0.8, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'red'
              }
            },
            axisTick: {
              distance: -2,
              length: 5,
              lineStyle: {
                color: '#759AA0',
                width: 2
              }
            },
            splitLine: {
              distance: -2,
              length: 10,
              lineStyle: {
                color: '#759AA0',
                width: 4
              }
            },
          
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10,
              
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize:15,
              color: 'inherit'
            },
            data: [
              {
                name:'ivan',
                value: 70
              }
            ]
          },
           {
            radius:'50%',
            center:['35%','75%'],
            title:{
             offsetCenter: ["0", "-46%"]
            },
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.2, '#91CA8C'],
                  [0.8, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'red'
              }
            },
            axisTick: {
              distance: -2,
              length: 5,
              lineStyle: {
                color: '#759AA0',
                width: 2
              }
            },
            splitLine: {
              distance: -2,
              length: 10,
              lineStyle: {
                color: '#759AA0',
                width: 4
              }
            },
          
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10,
              
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize:15,
              color: 'inherit'
            },
            data: [
              {
                name:'ivan',
                value: 70
              }
            ]
          },
          {
            radius:'50%',
            center:['70%','75%'],
            title:{
             offsetCenter: ["0", "-46%"]
            },
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.2, '#91CA8C'],
                  [0.8, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'red'
              }
            },
            axisTick: {
              distance: -2,
              length: 5,
              lineStyle: {
                color: '#759AA0',
                width: 2
              }
            },
            splitLine: {
              distance: -2,
              length: 10,
              lineStyle: {
                color: '#759AA0',
                width: 4
              }
            },
          
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10,
              
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize:15,
              color: 'inherit'
            },
            data: [
              {
                name:'ivan',
                value: 70
              }
            ]
          }
        ]
      };
    myecharts.setOption(option)

}

renderybp()